<template>
    <div id="login">
      <div class="login-title-logo">
        <img class="logo-header" src="static/logoh.png" alt="">
        <p class="title-name">BestProperty</p>
        <p class="balck"></p>
      </div>
      <div class="demo-ruleForm login-container">
        <h3 class="title">Login</h3>
        <el-form>
          <div style="margin-top:20px;">
            <el-form-item>
              <div id="googleBtn" class="google-btn"></div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="text-align:center;">
        <p>Customer support</p>
        <p>09967611168 | 09951203008</p>
      </div>
    </div>
</template>

<script>
  // import {loginUser, sendSmsUser,loginWithGoogle,loginWithFaceBook, loginWithPassAndName} from '@/api/api'
  import Qs from 'qs'

  export default {
    name: 'Login',
    data() {
      return {
        google: ''
      }
    },
    methods: {
      onSignIn(googleUser) {
        console.log(1)
      },
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      // 去掉空格
      trim(str, isGlobal) {
        var result
        result = str.replace(/(^\s+)|(\s+$)/g, '')
        if (isGlobal.toLowerCase() === 'g') {
          result = result.replace(/\s/g, '')
        }
        return result
      },
      // 谷歌登录成功后回调函数
      onSuccess(googleUser) {
        var googleId = googleUser.getBasicProfile().getId()
        var name = googleUser.getBasicProfile().getName()
        var email = googleUser.getBasicProfile().getEmail()
        let data = {
          'googleId': googleId,
          'googleName': name,
          'googleEmail': email
        }
        let params = Qs.stringify(data)
        loginWithGoogle(params).then((res) => {
          if (res.data) {
            let data = res.data
            if (data.errorID === 0) {
              localStorage.setItem('username', data.object.googleName)
              localStorage.setItem('developerId', data.object.id)
              localStorage.setItem('account', data.object.account)
              this.$store.commit('updateUserName', data.object.googleName)
              this.$store.commit('updateDeveloperId', data.object.id)
              this.$store.commit('updateAccount', data.object.account)
              this.signOutGoogle()
              this.$router.push('/main')
            } else {
              console.log(data.errorID)
              this.showToast(data.errorID)
            }
          }
        }).catch((error) => {
          console.log(error)
          this.messageToastErr('error,please try again leter')
        })
      },
      // 谷歌登录失败回调函数
      onFailure (e) {
        console.log("Google login error~")
        this.messageToastErr('error,please try again leter')
      },
      //登錄成功后退出谷歌登錄狀態
      signOutGoogle () {
        var auth2 = window.gapi.auth2.getAuthInstance()
        auth2.signOut().then(function () {
          console.log('User signed out.')
        })
      },
      renderButton() {
        window.gapi.signin2.render('googleBtn', {
          'scope': 'profile email',
          'width': 380,
          'height': 40,
          'longtitle': true,
          'theme': 'dark',
          'onsuccess': this.onSuccess,
          'onfailure': this.onFailure
        })
      },
    },
    mounted() {
      this.renderButton()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  #login{
    min-height: 740px;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    /* margin: 180px auto; */
    margin: 0 auto;
    width: 380px;
    padding: 35px 35px 25px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    margin-bottom: 50px;
    position: relative;
  }
  .login-container .title {
    margin: 0px auto 10px auto;
    padding: 10px 0;
    text-align: center;
    color: #505458;
  }

  .login-container .remember {
    margin: 0px 0px 35px 0px;
  }

  .smsBtn {
    width: 100%;
    padding: 12px 5px;
  }

  .login-title-logo {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .login-title-logo .logo-header {
    width: 100px;
  }

  .login-title-logo .title-name {
    margin: 0;
    font-size: 18px;
    color: rgb(255, 153, 0);
  }

  .login-title-logo .balck {
    margin: 0.4em 0 2em 0;
  }
  .login-container .el-tabs--card>.el-tabs__header .el-tabs__nav {
     border: none;
  }
  .login-container  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color:#FF9900;
  }
  .login-container .el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left:none;
  }
  .login-container  .el-tabs__item{
    padding:0;
    flex:1;
    text-align:center;
  }
  .login-container .el-tabs__nav{
    width:100%;
    display:flex;
  }
  .login-container .el-tabs__active-bar {
    background-color: #FF9900;
  }

  .login-container .el-tabs__item:hover, .login-container .el-tabs__item.is-active {
    color: #FF9900;
  }

  .login-container .el-button--warning {
    background-color: #FF9900;
    border-color: #FF9900;
  }

  .index-page-a {
    text-decoration: none;
    color: #FF9900;
  }
  .google-btn{
    width:100%;
    height:40px;
  }
  .google-btn .abcRioButtonBlue .abcRioButtonIcon{
    background-color: transparent;
  }
  .google-btn .abcRioButtonBlue{
    background-color: #fff;
    box-shadow:none;
    border-radius:5px;
    border:1px solid #888;
    color:#444;
  }
  .google-btn .abcRioButtonBlue .abcRioButtonContentWrapper{
    border:none;
  }
  .google-btn .abcRioButtonBlue:hover{
    background-color: #fff;
    box-shadow:none;
  }
  .login-container .facebook-btn{
    background-color: #3b5998 !important;
    border:1px solid #3b5998 !important;
    color:#fff !important;
  }
  .login-container .facebook-btn:hover{
    background-color: #5477c0 !important;
    border:1px solid #5477c0 !important;
    color:#fff !important;
  }
  .login-container .facebook-icon{
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin: 10px;
    background-size:100% 100%;
  }
  .login-container  .abcRioButtonContents:before{
    content: 'Login with Google';
    top:0;
    left:0;
  }
  .login-container .facebook-btn span{
    margin-left:30px;
  }
  .login-container  .abcRioButtonContents{
    margin-left:0;
  }
  .login-container  .abcRioButtonContents span {
    display:none
  }
  .lang-img {
    position: absolute;
    cursor: pointer;
    padding: 5px;
    right: 15px;
    top: 15px;
  }
</style>
